import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect, Link } from 'react-router-dom';
import { Table, Button, Divider } from 'antd';

class Article extends Component {

  constructor(props) {
    super(props);
    this.state = {
      columns: [{
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      }, {
        title: '用户ID',
        dataIndex: 'userId',
        key: 'userId',
      }, {
        title: '文章标题',
        dataIndex: 'title',
        key: 'title',
      }, {
        title: '文章内容',
        dataIndex: 'content',
        key: 'content',
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      }, {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: (text, record) => (
          <span>
            <Button>编辑 - {record.title}信息</Button>
            <Divider type='vertical' />
            <Button onClick={this.props.deleteArticle.bind(this, record.id)}>删除</Button>
          </span>
        )
      }]
    }
  }

  render() {
    const { dataSource, loginStatus } = this.props;
    if(loginStatus) {
      return (
        <div className='user-list-wrapper'>
            <div className='user-list-title'>
              <h1>文章列表</h1>
              <Link to='/home/articleEdit'>写文章</Link>
            </div>
            <div className='user-list-info'>
              <Table columns={this.state.columns} dataSource={dataSource.toJS()} />
            </div>
          </div>
      );
    } else {
      return <Redirect to='/login' />;
    }
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'loginStatus']),
  dataSource: state.getIn(['article', 'dataSource'])
});

const mapDispatch = (dispatch) => ({
  getArticleList() {

  },

  deleteArticle(id) {

  }
});

export default connect(mapState, mapDispatch)(Article);